<template>
    <header ref="headerRef" 
        class="w-full h-8vh flex items-center fixed top-0 left-0 header-style z-99" 
    >
        <div class="h-full ml-50vh mr-50vh flex items-center">
            <img src="/images/万维高科-LOGO改版-13.png" class="w-99 h-39" alt="">
        </div>

        <n-tabs size="large" animated tab-class="tab-style" >
            <n-tab 
                v-for="link in dataStore.tabList" 
                :key="link.id" 
                :name="link.label" 
                v-show="link.show"
            >
                <n-popover 
                    v-if="link.children && link.children.length > 0" 
                    size="large" 
                >
                    <template #trigger>
                        <nuxt-Link :href="link.path">{{ link.label }}</nuxt-Link>
                    </template>
                    <template v-for="subLink in link.children" :key="subLink.id">
                        <div class="sub-link my-10px">
                            <nuxt-Link :href="subLink.path">{{ subLink.label }}</nuxt-Link>
                        </div>
                    </template>
                </n-popover>

                <nuxt-Link v-else :href="link.path">{{ link.label }}</nuxt-Link>
            </n-tab>
        </n-tabs>

        <!-- <div class="w-30vw flex items-center">
            <Icon name="cus:call" class="" />
            <div class="mx-1vw">{{ dataStore.companyInfo.phone }}</div>
            <n-popover size="large" class="">
                <template #trigger>
                    <Icon name="cus:language" size="20px" class="cursor-pointer" />
                </template>
                <div class="sub-link my-10px cursor-pointer"> 简体中文 </div>
                <div class="sub-link my-10px cursor-pointer"> English </div>
            </n-popover>
        </div> -->
    </header>
</template>

<script setup>
import { ref, reactive } from 'vue'


const HeaderDefaultBg = 'rgba(0, 0, 0, 0.1)'
const HeaderDefaultColor = '#fff'
const headerRef = ref()
const dataStore = reactive({
    headerBg: HeaderDefaultBg,
    headerColor: HeaderDefaultColor,
    activeTab: '首页',
    tabList: [
        {id: '1', label: '首页', path: '/', show: true, sort: '1', children: []},
        // {id: '5', label: '关于', path: '/about', show: true, sort: '3', children: [
        //     {id: '99', label: '公司介绍', path: '/about/profile', show: true, sort: '1',},
        //     {id: '99', label: '企业文化', path: '/about/culture', show: true, sort: '2',},
        //     {id: '100', label: '发展历程', path: '/about/history', show: true, sort: '3',},
        // ]},
        {id: '2', label: '解决方案', path: '#solution', show: true, sort: '2', children: [
            // {id: '89', label: 'PHM系统', path: '#PHM', show: true, sort: '2',},
            // {id: '88', label: 'X-gear大模型', path: '#X-gear', show: true, sort: '1',},
        ]},
        {id: '3', label: '案例', path: '#products', show: true, sort: '3', children: []},
        {id: '4', label: '联系我们', path: '#bottom', show: true, sort: '4', children: []},
    ],
    companyInfo: {
        phone: '0000-66666666',
        address: '北京市海淀区中关村南大街6号中电信息大厦',
        email: 'xxxx@xxxx.com',
        website: 'wwww.xxxxx.com',
    },
})

// 监控页面滚动，调整header背景色和文字颜色
const watchScroll = () => {
    // const top = headerRef.value?.offsetHeight
    const top = 200
    const scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
    if (scrollTop > 0) {
        const op = scrollTop >= top ? 1 : parseFloat((scrollTop / top).toFixed(2))
        dataStore.headerBg = `rgba(255,255,255,${op})`
        dataStore.headerColor = `#333`
    } else {
        dataStore.headerBg = HeaderDefaultBg
        dataStore.headerColor = HeaderDefaultColor
    }
}

onMounted(() => {
    window.addEventListener('scroll', watchScroll)
})

onBeforeUnmount(() => {
    window.removeEventListener('scroll', watchScroll)
})



</script>

<style scoped>
.header-style {
    border-bottom: 1px solid rgba(255,255,255,.2);
    transition: all .5s ease;
    background-color: v-bind('dataStore.headerBg');
    color: v-bind('dataStore.headerColor');
    box-shadow: 0 0 15px rgb(0 0 0 / 20%);
}
.header-style:hover {
    background-color: #fff;
    color: #333;
}
.header-style:deep(.tab-style) {
    color: v-bind('dataStore.headerColor');
}
.header-style:hover :deep(.tab-style) {
    color: #333;
}
.sub-link {
    transition: all .5s ease;
}
.sub-link:hover {
    background-color: none;
    color: #19a3cb;
}
</style>